<template>
  <div class="personal-center">
    <!-- <el-affix :offset="56"> -->
    <div class="side-bar">
      <div
        class="bar-item"
        :class="currComName === item.name ? 'active' : ''"
        v-for="item in menus"
        :key="item.name"
        @click="handleBarClick(item.name)"
      >
        <img style="height:20px;width:20px;margin-right:10px" :src="item.img"/>
        <p>{{ item.label }}</p>
      </div>
    </div>
    <!-- </el-affix> -->

    <div class="content">
      <component :is="coms[currComName]"></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import historyRecord from "./components/historyRecord.vue";
import favorite from "./components/favorite.vue";
import personalInfo from "./components/personalInfo.vue";
import orders from "./components/orders.vue";
import care from "./components/care.vue";
import plan from "./components/plan.vue";
import msg from "./components/msg.vue";

import { menus } from "../../config";
import { usePersonalCenterHooks } from "./hooks";

const coms: any = {
  info: personalInfo,
  plan,
  orders,
  favorite,
  care,
  history: historyRecord,
  msg
};

const { currComName, handleBarClick } = usePersonalCenterHooks();
</script>

<style scoped lang="postcss">
.personal-center {
  @apply w-2/3 mx-auto flex mt-3 justify-between;
  .side-bar {
    @apply bg-white fixed;
    width: 200px;
    /* height: 180px; */
    .bar-item {
      @apply py-3 text-center cursor-pointer flex justify-center;
      &:hover {
        background: #eef5fe;
      }
    }
    .active {
      @apply font-bold text-theme-color;
      background: #eef5fe;
    }
  }
  .content {
    @apply flex-1;
    margin-left: 220px;
  }
}
</style>
